/*
 * @Author: Zhouhai 497675647@qq.com
 * @Date: 2022-11-18 14:00:17
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2024-04-16 16:18:13
 */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { getUserSelectList } from '@/api/system/user';
import { UserDomain } from '@/type.d/system';
import { Modal, Transfer } from 'antd';
import { ListStyle, TransferDirection } from 'antd/lib/transfer';
import React, { useEffect, useState } from 'react'

interface TransferProps {
    isModalOpen: boolean;
    targetKeys?: string[];
    onCancel: () => void;
    onOk: (targetKeys: string[]) => void;
    dataSources: any[]
}

interface RecordType extends Record<string, string> {
    key: string;
    title: string;
    description: string;
}

const RoleTransfer: React.FC<TransferProps> = ({ isModalOpen, dataSources, targetKeys: oldTargetKeys = [], onCancel, onOk }: TransferProps) => {

    const [targetKeys, setTargetKeys] = useState<string[]>(oldTargetKeys);

    useEffect(() => {
        setTargetKeys([...oldTargetKeys])
    }, [oldTargetKeys])



    const onChange = (targetKeys: string[], direction: TransferDirection, moveKeys: string[]) => {
        console.log(targetKeys, direction, moveKeys);
        setTargetKeys(targetKeys)

    }


    return (
        <Modal
            centered
            destroyOnClose
            styles={
                {
                    body: { display: 'flex', alignItems: 'center', justifyContent: 'center'}
                }
            }
            open={isModalOpen}
            closable={false}
            onCancel={onCancel}
            onOk={() => {
                onOk(targetKeys)
            }}
            keyboard={false}
            maskClosable={false}>
            <Transfer<RecordType>
                listStyle={(style: ListStyle) => { return { height: '300px' } }}
                locale={{ itemUnit: '项', itemsUnit: '项' }}
                dataSource={dataSources}
                render={item => item.title}
                titles={['未分配', '已分配']}
                targetKeys={targetKeys}
                onChange={onChange}
            />

        </Modal>
    )
}
export default RoleTransfer;